<template>
  <div class="address-list">
    <van-nav-bar title="收货地址" left-arrow @click-left="$router.back()" />
    <van-address-list v-if="vanAddress" v-model="defaultId" :list="vanAddress" :disabled-list="disabledList" disabled-text="以下地址超出配送范围" default-tag-text="默认" @add="onAdd" @edit="onEdit" ref="address">
      <template #tag>
        <van-icon name="delete-o" class="icon-del" @click.stop.prevent="delAddress()" />
      </template>
    </van-address-list>
  </div>
</template>

<script>
import { getAddressList, defaultAddress, removeAddress, setDefaultAddress } from '@/apis/address'
import { Toast, Dialog } from 'vant'
import isEmptyAddress from '@/mixins/emptyAddressConfirm'
export default {
  mixins: [isEmptyAddress],
  name: 'AddressList',
  async created () {
    await this.AsyncGetAddressList()
    this.isEmptyAddress(this.addressList)
  },
  data () {
    return {
      chosenAddressId: '1',
      disabledList: [
        {
          id: '3',
          name: '王五',
          tel: '1320000000',
          address: '浙江省杭州市滨江区江南大道 15 号'
        }
      ],
      item: {},
      addressList: [],
      defaultId: 0,
      isDel: false
    }
  },
  watch: {
    async defaultId (newValue) {
      this.defaultId = newValue
      await this.AsyncSetDefaultAddress()
    }
  },
  methods: {
    // 新增地址
    onAdd () {
      this.$jumpToPath('address/create')
    },
    onEdit (item, index) {
      this.$jumpToPath('address/edit', { addressId: item.id })
    },
    // 删除地址
    delAddress () {
      // 根据id去删除地址
      Dialog.confirm({
        title: '确定删除此地址吗?'
      })
        .then(() => {
          // on confirm
          removeAddress(this.presetId).then(() => {
            Toast('删除成功')
            // presetId被删了，需要找下一个作为默认id,方法论，在什么时候设置默认地址，在渲染的时候，或者删除的时候
            this.AsyncGetAddressList()
          })
        })
        .catch(() => {
          // on cancel
        })
    },
    async AsyncGetAddressList () {
      const {
        data: { list }
      } = await getAddressList()
      this.addressList = list
      // 获取默认地址
      const {
        data: { defaultId }
      } = await defaultAddress()
      // 设置默认地址，如果当前选择的被删除了，那么获取到的默认地址默认就是0，我们进行判断，如果为0，就设置为第一条
      if (list.length === 0) {
        return
      }
      this.defaultId = (defaultId === 0 ? list[0].address_id : defaultId)
    },
    async AsyncSetDefaultAddress () {
      await setDefaultAddress(this.presetId)
    }
  },
  computed: {
    // 封装van中需要的数据结构
    vanAddress () {
      return this.addressList.map((item) => ({
        id: item.address_id,
        name: item.name,
        tel: item.phone,
        address: item.region.province + ' ' + item.region.city + ' ' + item.region.region,
        isDefault: item.address_id === this.presetId
      }))
    },
    presetId: {
      get () {
        return this.defaultId
      }
    }
  }
}
</script>

<style lang="less" scoped>
// 默认地址图标样式
.van-address-item__tag {
  padding: 2px 8px;
  font-size: 13px;
}
.address-list {
  position: relative;
}
.van-address-item__edit {
  right: 55px;
}
.icon-del {
  position: absolute;
  top: 16px;
  right: 14px;
}
</style>
